<template>
  <div class="mymusic">
    <type-list name="我的音乐" iconinfo="icon-music" count="28" :playing="true"></type-list>
    <type-list name="最近播放" iconinfo="icon-zuijinplay" count="18"></type-list>
    <type-list name="我的电台" iconinfo="icon-diantai" count="1"></type-list>
    <type-list name="我的收藏" iconinfo="icon-collect" count="3" :has-border="false"></type-list>
    <musicsheet v-for="(item, index) in items" :item="item" :index="index" :key="item.id"></musicsheet>
    <!-- 底部显示的菜单列表 -->
    <!--<menu-list></menu-list>-->
  </div>
</template>

<script>
  import musicsheet from '../musicsheet/musicsheet.vue'
  import typelist from '../typelist/typelist.vue'
  import menulist from '../menulist/menulist.vue'
  export default {
    computed: {
      items () {
        // console.log("show")
        // console.log(this.$store.getters.getMusicAllList);
        return this.$store.getters.getMusicAllList.sheets
      }
    },
    components: {
      'type-list': typelist,
      musicsheet,
      'menu-list': menulist
    }
  }
</script>

<style lang="stylus">
  @import "./../../common/stylus/global.styl"
  .mymusic
    position:fixed
    background:#fff
    overflow:auto
    top:50px
    bottom:46px
    left:0
    right:0
    z-index:9
    -webkit-overflow-scrolling:touch
</style>
